<template>
  <view>
    <view class="tabs">
      <u-sticky bgColor="#fff">
        <u-tabs :list="list" @change="tabChange"></u-tabs>
      </u-sticky>
    </view>

    <view class="orders" v-if="ProList.length > 0">
      <view class="order-item" v-for="item of ProList" :key="item.id">
        <view>
          <text>预约项目：</text>{{ item.project.name }}
          <text class="status">{{ item.status_text }}</text>
        </view>
        <view><text>预约时间：</text>{{ item.createtime }}</view>
        <view v-if="item.price"><text>费用：</text>{{ item.price }}元</view>
        <view class="action">
          <u-button
            @click="ToInfo(item.id)"
            class="item"
            type="primary"
            size="mini"
            >详情</u-button
          >

          <!-- 商家已接单(已报价) -->
          <u-button
            @click="ToPay(item.id)"
            v-if="item.status == 1"
            class="item"
            type="success"
            size="mini"
            >确认支付</u-button
          >

          <!-- 已支付、未服务 -->
          <u-button
            @click="ToRevoke(item.id)"
            v-if="item.status > 0 && !item.rate"
            class="item"
            type="error"
            size="mini"
            >撤销预约</u-button
          >

          <u-button
            @click="ToCancel(item.id)"
            v-if="item.status == -2 && !item.rate"
            class="item"
            type="error"
            size="mini"
            >取消撤销</u-button
          >

          <!-- 已服务、未评价 -->
          <u-button
            @click="ToRate(item.id)"
            v-if="item.status == 3 && !item.rate"
            class="item"
            type="warning"
            size="mini"
            >评分</u-button
          >
        </view>
      </view>
    </view>

    <u-empty v-else mode="order" icon="order"> </u-empty>

    <!-- 消息提示的组件 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
    <u-modal
      :show="PayShow"
      :content="PayContent"
      showCancelButton
      @confirm="PayConfirm"
      @cancel="this.PayShow = false"
    >
    </u-modal>

    <u-modal
      :show="RevokeShow"
      :content="RevokeContent"
      showCancelButton
      @confirm="RevokeConfirm"
      @cancel="this.RevokeShow = false"
    >
    </u-modal>
  </view>
</template>
<script>
export default {
  onShow() {
    this.$u.auth.check()

    // 获取本地存储的信息
    let LoginUser = uni.getStorageSync('LoginUser')

    this.LoginUser = LoginUser

    this.OrderList()
  },
  data() {
    return {
      list: [{
        name: '全部',
      }, {
        name: '未接单',
        id: 0
      }, {
        name: '待付款',
        id: 1
      }, {
        name: '已付款',
        id: 2
      }, {
        name: '已完成',
        id: 3
      }, {
        name: '申请撤销',
        id: -2
      }, {
        name: '已撤销',
        id: -1
      }],
      status: null,
      LoginUser: null,
      PayShow: false,
      PayContent: '是否确认支付订单',
      RevokeShow: false,
      RevokeContent: '是否确认撤销订单',
      ProList: [],
      orderid: null
    }
  },
  methods: {
    tabChange(item) {
      if (item.id || item.id == 0) {
        this.status = item.id
      } else {
        this.status = ''
      }

      this.OrderList()
    },
    async OrderList() {
      let data = {
        status: this.status,
        userid: this.LoginUser.id
      }

      let result = await this.$u.api.project.OrderIndex(data)

      this.ProList = result.data

    },
    ToPay(id) {
      this.PayShow = true
      this.orderid = id
    },
    ToRate() {
      //评分功能带完善
    },
    async PayConfirm() {
      this.PayShow = false

      let data = {
        userid: this.LoginUser.id,
        orderid: this.orderid
      }

      let result = await this.$u.api.project.OrderPay(data)

      if (result.code === 1) {
        this.$refs.notice.show({
          type: 'success',
          message: result.msg,
          icon: true,
          complete: () => {
            this.OrderList()
          }
        })

        return false
      } else {
        this.$refs.notice.show({
          type: 'error',
          message: result.msg,
          icon: true
        })
        return false
      }
    },
    ToRevoke(id) {
      this.RevokeShow = true

      this.orderid = id
    },
    async RevokeConfirm() {
      this.RevokeShow = false

      let data = {
        userid: this.LoginUser.id,
        orderid: this.orderid
      }

      let result = await this.$u.api.project.OrderRevoke(data)

      if (result.code === 1) {
        this.$refs.notice.show({
          type: 'success',
          message: result.msg,
          icon: true,
          complete: () => {
            this.OrderList()
          }
        })

        return false
      } else {
        this.$refs.notice.show({
          type: 'error',
          message: result.msg,
          icon: true
        })
        return false
      }
    },
    ToInfo(id) {
      this.$u.route({
        type: 'navigateTo',
        url: '/pages/order/info',
        params: {
          orderid: id
        }
      })
    }
  },
}
</script>

<style>
.order-item {
  padding: 20rpx 40rpx;
  margin: 30rpx 0rpx;
  /* border-bottom: 2rpx solid #CCCCCC; */
  box-shadow: 0 0 10px #ddd;
}
.order-item text {
  font-size: 32rpx;
}

.order-item .status {
  float: right;
}

.tabs {
  border-bottom: 2rpx solid #cccccc;
  box-shadow: 0 0 10px #ddd;
}
.order-item .action {
  text-align: right;
  margin-top: 1em;
}

.order-item .action button {
  margin-right: 0.5em !important;
  width: 20% !important;
  display: inline-block;
  height: 26px;
  line-height: 26px;
}

.u-tabs__wrapper__nav__item__text {
  white-space: nowrap;
}
</style>